<template>
  <div id="app">
    <v-form-designer ref="vfDesigner" :banned-widgets="testBanned"
                   :designer-config="designerConfig">
      <!-- 自定义按钮插槽演示 -->
      <template #customToolButtons>
        <el-button type="text" @click="saveFormJson">保存</el-button>
      </template>
    </v-form-designer>

    <el-button type="primary" @click="saveFormJson1">点击</el-button>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';

const vfDesigner = ref(null);

const fieldListApi = {
	URL: '',
	labelKey: '',
	nameKey: '',
};

const testBanned = ref([
	//'sub-form',
	//'alert',
]);

const designerConfig = reactive({
	languageMenu: true,
	externalLink: false,
	formTemplates: false,
	eventCollapse: false,
	clearDesignerButton: false,
	// previewFormButton: false,

	//presetCssCode: '.abc { font-size: 16px; }',
});

const saveFormJson = () => {
	console.log('++++++');
};

const saveFormJson1 = () => {
  console.log(vfDesigner.value);
  console.log(vfDesigner.value.getFormJson())
};
</script>

<style lang="css" scoped>
body {
	margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>
